<template>
  <div style="display: flex;text-align: center;justify-content: center">
    <div style="width: 60%;text-align: center;margin-top: 50px" class="card">
      <el-form ref="formRef" :rules="data.rules" :model="data.form" label-width="100px" style="padding-right: 50px">
        <el-form-item label="头像">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/files/upload/shopAvatar"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img v-if='data.form.avatar' :src="data.form.avatar" alt="店铺头像" style="width: 100%;"/>
            <el-icon v-else>
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <el-input v-model="data.form.username" disabled autocomplete="off"/>

        </el-form-item>
        <el-form-item label="店面" prop="shopname">
          <el-input disabled v-model="data.form.shopname" autocomplete="off" placeholder="请输入店名"/>
        </el-form-item>
        <el-form-item label="店铺地址" prop="address">
          <el-input v-model="data.form.address" prefix-icon="Address"
                    style="width: 90%;height: 40px;font-weight: bolder;font-size: 15px;border-radius: 10px"
                    placeholder="请输入新地址"></el-input>
        </el-form-item>
        <div style="justify-content: center;text-align: center;">
          <el-button type="primary" @click="updatePerson">更新店铺信息</el-button>
        </div>
      </el-form>
    </div>
  </div>

</template>
<script setup>

import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import request from "@/utils/request.js";
import {Plus} from "@element-plus/icons-vue";

const formRef = ref()
const data = reactive({
  person: JSON.parse(localStorage.getItem("information")),
  form: {},
  rules: {
    username: [{required: true, message: "请输入账号", trigger: "blur"}],
    shopname: [{required: true, message: "请输入名称", trigger: "blur"}],
    address: [{required: true, message: "请输入地址", trigger: "blur"}],
  },

})
const emit = defineEmits(['updatePerson'])
const updatePerson = () => {
  formRef.value.validate((valid) => {
    request.put('/business/update', data.form).then(res => {
      if (res.code === 200) {
        localStorage.setItem("information", JSON.stringify(data.form))
        emit('updatePerson')
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}


const handleAvatarSuccess = (res) => {
  console.log(res.data)
  data.form.avatar = res.data;
}
data.form = data.person;
</script>

<!--<style scoped>-->
<!--//.avatar-uploader .avatar {-->
<!--//  width: 128px;-->
<!--//  height: 128px;-->
<!--//  display: block;-->
<!--//}-->
<!--</style>-->

<style>
.avatar-uploader {
  width: 128px;
  height: 128px;
  display: block;
}
</style>
